<template>
	<view class="mybutm">
		<view @tap="voice =!voice" class="iconfont addleft"
		 :class="!voice? 'icon-jianpan' :'icon-yuyin'"></view>
		<view class="addcenter" >
			<!-- <view v-for="(item,i) in spantext" :key="i" class="itemtext" @tap="clicktext(i)"> -->
				<!-- <view v-if="show">{{item}}</view> -->
				<!-- <input type="text" v-model="text"/> -->
			<!-- </view> -->
			<!-- <input 
			 v-model="text"
				v-if="voice" 
				class="addtxt"
				maxlength="16"
				@input="inputlgth"
				@keyup.delete="deltext"
				@confirm="search" 
				/> -->
			<textarea class="mianboxtext"  
			@blur="bindTextAreaBlur" auto-height v-if="voice"
			 maxlength="300"
			 v-model="text"
			 @confirm="subtarea"></textarea>
			<button v-else>按住 说话</button>
		</view>
		<view class="addright">
			<view class="iconfont icon-xiaolian"></view>
			<view class="iconfont icon-jiahao"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				voice:true,
				show:true,
				text:'',
				spantext:[],
			}
		},
		methods:{
			   bindTextAreaBlur: function (e) {
			            console.log(e.detail.value)
			        },
							subtarea(){
								console.log(this.text);
								// this.$emit('emiteart',)
							},
			// inputlgth(e){
			// 	console.log(e);
			// let arrval = 	this.text.split('')
			// console.log(arrval.length);
			// if(arrval.length >= 16){
			// 	console.log(222);
			// 	this.spantext.push(arrval.join(''))
			// 	this.text = ''
			// 	// this.spanipt()
			// }
			// },
			// spanipt(){
			// 	console.log(66);
			// },
			// // 删除
			// deltext(){
			// 	console.log(8899);
			// 	if(this.text == ''){
					
			// 	this.text = 	this.spantext[this.spantext.length - 1] || ''
			// 	this.spantext.pop()
			// 	}
			// 	// this.deltext()
				
			// },
			// // 确认
			// search(){
			// let emittext = this.spantext.push(this.text)
			// 	this.text = ''
			// 	this.spantext = []
			// 	this.$emit('subtext',emittext)
			// },
			// clicktext(i){
			// 	console.log(i);
			// }
		}
	}
</script>
<style lang="scss" scoped>
	
	.mybutm {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10rpx 0;
		// height: 200rpx;
		background-color: #fff;
		.addtxt{
			// height: 200rpx;
		}
		.addleft {
			// width: 80rpx;
			
			box-sizing: border-box;
			padding:  10rpx;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}
		.addcenter {
			flex: 1;
			background-color: aliceblue;
			padding: 20rpx;
		}
		.addright {
			display: flex;
			align-items: flex-end;
			justify-content: space-around;
			// width: 160rpx;
			// box-sizing: border-box;
			padding: 10rpx 0;
			// view:first-child{
				// padding-left: 10rpx;
			// }
			// view:last-child {
			// padding: 0 10rpx;
			// }
		}
		.itemtext{
			// padding: 10rpx 0;
		}
	}
</style>